class Uploader {
	defaultOption = {
		action:"/upload/",
		type:"sdfasdf",
		ext:".jpg,.png,.gif,.jpeg,.bmp",
		fileSizeTotalMbLimit:10,
		fileSizeMbLimit:10,
		fileTotalLimit:5,
		multiple: true,
		fileListWrap: 'image-grid',
		success(){},
		fail(){},
		complete(){}
	}
	options={}
	fileList=[]
	resultList=[]
	constructor(selector,option) {
		this.selector = selector;
		this.option = $.extend({},this.defaultOption,option);
		
		var value=document.querySelector(selector).value
		this.fileList = this.getFileListByValue(value); // 文件列表
		this.resultList = this.getResultListByFileList(this.fileList); // 结果列表
		
		this.createElement()
		this.updateElement();
		return ;
	}
	createElement(){
		var option=this.option;
		
		//上传器
		const container = document.createElement("div");
		container.setAttribute("class", "ht-uploader");
		document.querySelector(this.selector).parentNode.appendChild(container)
		
		//上传按钮
		const uploadInput=document.createElement("input");
		uploadInput.setAttribute("type","file");
		uploadInput.setAttribute("class","fileInput");
		uploadInput.setAttribute("accept",option.ext);
		uploadInput.setAttribute("multiple",option.multiple);
		this.uploadInput=uploadInput;
		container.appendChild(uploadInput);
		
		//事件监听
		uploadInput.addEventListener('change', (event) => {
			const files = event.target.files;
			var formData = new FormData();
			for(var i=0;i<files.length;i++){
				formData.append("fileList",files[i]);
			}
			this.upload(formData)
            $(this.uploadInput).val("");
		});
		
		//背景按钮
		const bgButton = document.createElement('input');
		bgButton.setAttribute("type","button");
		bgButton.setAttribute("class","bgButton");
		bgButton.setAttribute("value","选择文件");
		container.appendChild(bgButton);
		
		//结果列表
		const resultListContainer=document.createElement("ul");
		resultListContainer.setAttribute("class","ht-resultList");
		this.resultListContainer=resultListContainer;
		container.appendChild(resultListContainer);
	}
	//更新元素
	updateElement(){
		var resultList=this.resultList;
		this.resultListContainer.innerHTML = ''
		for (var i=0;i<resultList.length; i++) {
			this.resultListContainer.append(this.getResultElement(resultList[i],i));
		}
		var value=JSON.stringify(this.getFileListByResultList(resultList))
		document.querySelector(this.selector).value=value;
	}
	getResultElement(result,index){
		console.log(index);
		
		var file=result.vo;
		let event = result.event;
		let tips  = result.tips;
		
		let fileName = file.fileName;
		let fileSize = file.fileSize;
		
		
		var li=document.createElement("li");
		li.setAttribute("class", event);
		
		var html="<span class=\"fileName\">" + fileName + "</span><span class=\"fileSize\">(" + fileSize + "kb)</span><span class=\"tips\">" + tips + "</span>";
		
		const pTag = document.createElement('p');
		pTag.setAttribute("class", "subject");
		pTag.innerHTML=html;
		li.appendChild(pTag);
		
		const closeButton = document.createElement('a');
		closeButton.setAttribute("class", "closeButton");
		closeButton.innerText = "关闭";
		li.appendChild(closeButton);
		closeButton.addEventListener('click', (event) => {
			this.removeByIndex(index)
		});
			
		const progressTag = document.createElement('span');		
		progressTag.setAttribute("class", "progressBar");
		progressTag.innerText = "1";
		li.appendChild(progressTag);
		
		return li;
	}
	appendFile(file){
		if(this.fileList.length>=this.option.fileTotalLimit){
            alert("上传失败，最多可上传"+this.option.fileTotalLimit+"个附件");
            return;
		}
		this.fileList.push(file);
		this.resultList = this.getResultListByFileList(this.fileList); // 结果列表
		this.updateElement();
	}
	removeByIndex (index) {
		this.resultList.splice(index,1);
		this.updateElement();
	}
	//上传
	upload(formData) {
		var option=this.option;
		formData.type=option.type;
		$.ajax({
			type: 'POST',
			url: option.action,
			contentType : false, 
			processData : false,
			data: formData,
			success:res=>{
				var resultList=res.vo;
                if((this.resultList.length+resultList.length)>this.option.fileTotalLimit){
                    alert("上传失败，最多可上传"+this.option.fileTotalLimit+"个附件");
                    return;
                }
				this.resultList=this.resultList.concat(resultList)
				this.updateElement();
			},
			complete:res=>{
				$(this.uploadInput).val("");
			}
		})
	}
	// 将值转为文件列表
	getFileListByValue (value) {
        if(value==""){
            return [];
        }
		var fileList=JSON.parse(value);
		return fileList;
	}
	// 将结果列表转换成文件列表
	getFileListByResultList (resultList) {
		var fileList=[];
		for (let i = 0; i < resultList.length; i++) {
			fileList.push(resultList[i].vo)
		}
		return fileList
	}
	// 将文件件列表转换为结果列表
	getResultListByFileList(fileList){
		var resultList=[];
		var result;
		for(var i=0;i<fileList.length;i++){
			result={
				event:"success",
				tips:"成功",
				vo:fileList[i]
			}
			resultList.push(result)
		}
		return resultList;
	}
}